<template>
	<view class="">
		<common-title :title="titleContent" @clickLeft="backToUpPage"></common-title>
		<!-- 下单页面 -->
		<view class="dish-order-container">
			
			<uni-card title="已选商品" class="dish-order-content">
				<scroll-view class="dish-order-scroll" scroll-y>
					<view v-for="item in cartItems" :key="item.id" class="dish-order-item">
						<image :src="item.dishImage" mode="aspectFill" class="dish-order-item-image"/>
						<view class="dish-order-item-info">
							<view class="dish-order-item-name">{{item.dishName}}</view>
							<view class="dish-order-item-price">{{item.price * item.quantity}}<uni-icons type="heart-filled" color="#ff4500" size="26rpx" style="margin-left: 5rpx;"></uni-icons></view>
						</view>
						<view class="dish-order-count">
							<text>×{{ item.quantity }}</text> <!-- 显示数量 -->
						</view>
					</view>
				</scroll-view>
				<view class="dish-order-amount">总额: {{totalPrice}}<uni-icons type="heart-filled" color="#ff4500" size="36rpx" style="margin-left: 5rpx;" /></view>
			</uni-card>
		</view>
		
		<view class="dish-order-checkout">
			<view class="dish-order-add-dish" @click="orderAddDish()">加菜</view>
			<view class="dish-order-order" @click="orderOrder()">下单</view>
		</view>
	</view>
	
</template>

<script setup>
	import { ref, onMounted, computed } from 'vue';
	import { apiRestaurantNewOrder } from '../../../utils/apiRestaurant';
	//================================common-title=========================================
	//标题内容
	const titleContent = ref({
		left:'',
		midst:'猪小妹餐厅'
	});
	
	//返回
	const backToUpPage = () => {
		uni.redirectTo({
			url:'/pages/index/restaurant/restaurant-menu'
		})
	};
	
	// 创建一个响应式的 cartItems 变量
	const cartItems = ref([]);
	
	// 计算总价格的计算属性
	const totalPrice = computed(() => {
	  return cartItems.value.reduce((total, item) => {
	    return total + (item.price * item.quantity);
	  }, 0);
	});
	
	// 加菜（返回上一个页面）
	const orderAddDish = () => {
	  uni.navigateBack(); // 使用 router 的 back 方法
	};
	
	// 下单确认
	const orderOrder = async () => {
		uni.showModal({
			title: '提示',
			content: '是否确认下单？',
			success: function (res) {
				if (res.confirm) {
					// TODO: 调用接口，生成订单数据
					// console.log('用户点击确定');
					// console.log(cartItems.value);
					apiRestaurantNewOrder(cartItems.value).then((res) => {
						// console.log(res);
						if (res.status === '1009'){
							uni.showToast({
								title:'余额不足',
								icon:'error'
							})
						}else{
							uni.showToast({
								title:'下单成功',
								icon:'success'
							})
							uni.redirectTo({
								url:`/pages/index/restaurant/restaurant-checkout?orderNo=${encodeURIComponent(res)}`
							})
						}
					}).finally(() => {
						uni.removeStorage({
							key:'cartDishData'
						})
					})
					
				} 
			}
		});
	};
	
	// 在 onMounted 生命周期钩子中解析 props.cartData
	onMounted(() => {
		uni.getStorage({
			key: 'cartDishData',
			success: function (res) {
				cartItems.value = JSON.parse(res.data)
			}
		});
	});
</script>

<style lang="scss" scoped>
	.dish-order-container {
		display: flex;
		.dish-order-content {
		    display: flex;
			flex-direction: column; /* 如果您需要垂直布局，可以添加此行 */
		    justify-content: center;
		    margin-bottom: 140rpx;
			overflow: hidden; /* 避免内容溢出 */
			border-radius: 20rpx 20rpx 20rpx 20rpx;
			.dish-order-scroll {
				max-height: 800rpx;
				.dish-order-item {
				    width: 100%;
				    height: 100rpx;
				    display: flex;
				    justify-content: space-between; /* 改变此行以分散内容 */
				    align-items: center;
				    padding: 10rpx;
					.dish-order-item-image {
					    width: 100rpx;
					    height: 75rpx;
					    border-radius: 10rpx;
					    margin-left: 30rpx;
					}
					.dish-order-item-info {
					    display: flex;
					    flex-direction: column;
					    justify-content: center; /* 垂直居中对齐 */
					    align-items: flex-start; /* 水平左对齐 */
					    margin-left: 30rpx; /* 可以根据需要调整这个值 */
					    font-size: 26rpx;
					    padding: 10rpx;
					    flex: 1; /* 让它占据剩余空间 */
					}
					.dish-order-count {
					    display: flex;
					    align-items: center;
					    margin-right: 30rpx;
					}
				}
			}
			.dish-order-amount{
				display: flex;
				justify-content: flex-end;
				padding: 10rpx;
				font-size: 36rpx;
			}
		}
	}
	
	
	
	.dish-order-checkout{
			position: fixed;
			display: flex;
			justify-content: space-around;
			align-items: center;
			width: 100%;
			bottom: 30rpx;
			.dish-order-add-dish{
				display: flex;
				justify-content: center;
				align-items: center;
				width: 180rpx;
				height: 80rpx;
				border-radius: 120rpx;
				background-color: $brand-theme-color;
				font-size: 36rpx;
				color: #fff;
				padding: 10rpx;
			}
			.dish-order-order{
				display: flex;
				justify-content: center;
				align-items: center;
				width: 180rpx;
				height: 80rpx;
				border-radius: 120rpx;
				background-color: #ff6f50;
				font-size: 36rpx;
				color: #fff;
				padding: 10rpx;
			}
	}
	
	
</style>
